<template>
  <a-layout class="login-container">
    <a-card :bordered="false" style="width: 380px">
      <a-tabs size="large" v-model:activeKey="activeKey" centered>
        <a-tab-pane key="1" tab="账号登录">
          <a-form :model="loginForm" name="login" @finish="onLoginFinish">
            <a-form-item
              name="username"
              :rules="[{ required: true, message: '请输入用户名' }]"
            >
              <a-input
                size="large"
                v-model:value="loginForm.username"
                placeholder="用户名"
              />
            </a-form-item>
            <a-form-item
              name="password"
              :rules="[{ required: true, message: '请输入密码' }]"
            >
              <a-input-password
                size="large"
                v-model:value="loginForm.password"
                placeholder="密码"
              />
            </a-form-item>
            <a-form-item>
              <a-button
                :loading="loginLoading"
                :disabled="loginLoading"
                size="large"
                type="primary"
                html-type="submit"
                block
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="手机登录">
          <a-form
            :model="phoneLoginForm"
            name="phoneLogin"
            @finish="onPhoneLoginFinish"
          >
            <a-form-item
              name="phone"
              :rules="[{ required: true, message: '请输入手机号' }]"
            >
              <a-input
                size="large"
                v-model:value="phoneLoginForm.phone"
                placeholder="手机号"
              />
            </a-form-item>
            <a-form-item
              name="code"
              :rules="[{ required: true, message: '请输入验证码' }]"
            >
              <a-input
                size="large"
                v-model:value="phoneLoginForm.code"
                placeholder="验证码"
                style="width: 60%"
              />
              <a-button
                size="large"
                type="primary"
                style="width: 38%; margin-left: 2%"
                @click="getCode"
                >获取验证码</a-button
              >
            </a-form-item>
            <a-form-item>
              <a-button
                :loading="loginLoading"
                size="large"
                type="primary"
                html-type="submit"
                block
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-layout>
</template>

<script setup>
import { ref } from "vue";
import { useSystemConfig } from "@/store/systemConfig.js";
import { useRouter } from "vue-router";
import { HOME_URL } from "../../config/config";
import { request } from "@/utils/request";
import { useLocalStorage } from "@vueuse/core";
import { TOKEN_KEY } from "../../utils/constants";
const systemConfig = useSystemConfig();

const router = useRouter();

const activeKey = ref("1");
const loginForm = ref({
  username: "",
  password: "",
});
const phoneLoginForm = ref({
  phone: "",
  code: "",
});

const getCode = () => {
  console.log("获取验证码");
  // 这里添加获取验证码逻辑
};

const onPhoneLoginFinish = (values) => {
  console.log("手机登录表单值:", values);
  // 这里添加手机登录逻辑
};

const loginLoading = ref(false);
const onLoginFinish = (values) => {
  const token = useLocalStorage(TOKEN_KEY, "");
  loginLoading.value = true;
  // 这里添加登录逻辑
  token.value = "123456";
  setTimeout(() => {
    loginLoading.value = false;
    router.push(HOME_URL);
  }, 300);
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>